<template>
	<view class="personal-info">
		<view class="list">
			<view class="item bor">
				<text class="label">头像</text>
				<view class="right">
					<button class="avatar-wrapper" plain open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<u-avatar :src="form.headImg" :size="35"></u-avatar>
					</button>
					<u-icon name="arrow-right" color="#666" size="12"></u-icon>
				</view>
			</view>
			<view class="item bor">
				<text class="label">* 名称</text>
				<view class="right">
					<input class="ipt" type="nickname" v-model="form.nickname" @blur="submitNickname"
						placeholder="请输入" />
				</view>
			</view>
			<view class="item bor" v-if="!type">
				<text class="label">* 密码</text>
				<view class="right">
					<input class="ipt" v-model="form.password" placeholder="请输入" />
				</view>
			</view>
			<view class="item">
				<text class="label">个性签名</text>
				<view class="right">
					<input class="ipt" v-model="form.info" @blur="submitInvoice" placeholder="请输入" />

				</view>
			</view>
		</view>
		<view class="list" v-if="!type">
			<view class="item">
				<text class="label">微信绑定</text>
				<view class="right">
					<button class="avatar-wrapper" plain open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
						<u-icon name="weixin-circle-fill" size="25" color="#999"></u-icon>
					</button>
					<u-icon name="arrow-right" color="#666" size="12"></u-icon>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="item">
				<text class="label">上传资质</text>
				<view class="right">
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1"
						:maxCount="1"></u-upload>
				</view>
			</view>
		</view>
		<view class="sub-btn" @tap="updateInfo">
			确 认
		</view>
	</view>
</template>

<script>
	import {
		getOpenId,
		update,
		findUserInfo
	} from '@/api/api.js'
	import config from '@/config/config.js'
	export default {
		data() {
			return {
				type: '',
				fileList1: [],
				form: {
					headImg: '',
					nickname: '',
					id: '',
					password: '',
					info: '',
					openid: '',
					flair: ''
				}
			}
		},
		onLoad(op) {
			console.log(op);
			if (op.type) {
				this.type = op.type
			}
		},
		onShow() {
			if (this.type) {
				this.getUser()
			}
		},
		methods: {
			getUser() {
				findUserInfo(uni.getStorageSync('userInfo').id).then(res => {
					if (res.code == 200) {
						if(res.data.flair){
							const obj = {
								status:'success',
								thumb:res.data.flair,
								type:'image',
								url:res.data.flair
							}
							this.fileList1.push(obj)
						}
						this.form = res.data
					}
				})
			},
			toPage(url) {
				uni.navigateTo({
					url
				})
			},
			onChooseAvatar(e) {
				let that = this;
				let avatarUrl = e.detail.avatarUrl;
				const BASEURL = config.baseUrl;

				console.log('avatarUrl: ', avatarUrl);
				// header: {
				// 	'Content-Type': 'application/x-www-form-urlencoded'
				// },
				uni.uploadFile({
					url: `${BASEURL}/common/upload`,
					filePath: avatarUrl,
					name: 'file',
					success(res) {
						console.log('onChooseAvatar: ', res);
						if (res.statusCode == 200) {
							that.$set(that.form, 'headImg', JSON.parse(res.data).url)
						}
					},
					fail(err) {
						console.log('err: ', err);
					}
				});
			},
			async submitNickname(e) {
				console.log('昵称', e);
				console.log(this.form);
			},
			async submitInvoice(e) {
				console.log('签名', e);
				console.log(this.form);
			},
			updateInfo() {
				update(this.form).then(res => {
					if (res.code === 200) {
						// this.form = res.data
						// uni.setStorageSync('userInfo', res.data)
						uni.switchTab({
							url: '/pages/index/index'
						})
					}
				})
			},
			getPhoneNumber(e) {
				console.log(e);
				// uni.showLoading({
				// 	title: '数据加载中...',
				// 	mask: true
				// })
				const that = this
				uni.login({
					provider: 'weixin', // 指定使用微信登录
					success: function(loginRes) {
						if (loginRes.code) {
							// 登录成功后得到 code
							const code = loginRes.code;
							// 将 code 发送到你的后端服务器，获取 openid
							getOpenId({
								code
							}).then(res => {
								if (res.code == 200) {
									console.log(res);
									that.openid = res.data
								}
							})
						} else {
							console.error('登录失败！' + loginRes.errMsg);
						}
					},
					fail: function(error) {
						console.error('微信登录失败', error);
					}
				});
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				this.form.flair = ''
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: `${config.baseUrl}/common/upload`, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							console.log(res);
							const dat = JSON.parse(res.data)
							if (dat.code == 200) {
								resolve(res.data.data)
								this.form.flair = dat.url
								console.log(this.fileList1);
							}
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss">
	.personal-info {
		width: 100%;
		padding: 20rpx 32rpx;
		box-sizing: border-box;

		.avatar-wrapper {
			border: none;
			background-color: transparent !important;
			padding: 0 !important;
		}

		.sub-btn {
			// width: 392rpx;
			height: 76rpx;
			background: #FD6F21;
			border-radius: 8rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 76rpx;
			margin: 80rpx auto 0;
		}



		.list {
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(0, 0, 0, 0.06);
			border-radius: 20rpx;
			width: 100%;
			margin: 20rpx 0;

			.item {
				padding: 20rpx;
				box-sizing: border-box;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.label {
					font-family: 'xiaomi-label',
				}

				.right {
					display: flex;
					justify-content: flex-end;
					align-items: center;

					// flex: 1;
					button {
						margin: 0 !important;
					}

					.ipt {
						min-width: 450rpx;
						text-align: right;
						font-weight: 300;
						font-size: 26rpx;
						color: #333333;
						font-family: 'xiaomi-text';
					}

					.input-placeholder {
						font-weight: 300;
						font-size: 26rpx;
						color: #999;
						font-family: 'xiaomi-text';
					}

					.u-icon {
						margin-left: 16rpx;
					}
				}
			}

			.bor {
				border-bottom: 1rpx solid #DDDDDD;
			}
		}
	}
</style>